<template>
  <div id="wrapper">

<!--    <img id="imageShow" style="width: 100%;height: auto;" :src="previewImg" alt="">-->
<!--    <video-->
<!--          ref="videoEl"-->
<!--          @onplay="onPlay"-->
<!--          id="videos"-->
<!--          src="../assets/video/test.mp4"-->
<!--          autoplay-->
<!--          muted-->
<!--          playsinline-->
<!--          crossorigin="anonymous"-->
<!--    ></video>-->
    <div style="float:left;position:relative;width:80%;height:60%;z-index: 999;">
      <videoPlayer
              id="videos"
              class="video-player vjs-custom-skin"
              ref="positiveVideoPlayer"
              :playsinline="true"
              :options="positivePlayerOptions"
              @play="onPlay"
              @canplay="canPlay"
              @loadeddata="loadeddata"
      ></videoPlayer>
    </div>

    <div style="position:absolute;top:0;left:0;float:left;width:80%;height:60%;z-index:1000;margin-top:1.5%;margin-left: 0.5%;">
      <canvas id="canvas" style="width:100%;height:auto"></canvas>
    </div>
    <div style="float:left;position:absolute;top:0;left:80px;">
      <button @click="getVideoPic" style="text-align: center;margin: 10px auto;z-index: 1001;"> 点击拍照</button>
    </div>


  </div>
</template>

<script>
  const {ipcRenderer} = require('electron');
  import SystemInformation from './LandingPage/SystemInformation'
  import { videoPlayer } from 'vue-video-player';
  import 'video.js/dist/video-js.css'
  let that;

  // 渲染层 接收人脸参数
  ipcRenderer.on('faceInfos', (event, arg) => {

    if(!that){
      console.log("can't load this to that.");
      return;
    }

    // console.log("接收到的信息",arg);
    that.box = arg.faceInfo.multi;
    const pr = arg.process;

    if (!that.box || !that.box.faceNum || that.box.faceNum === 0){
      console.log("尚未接收到人脸处理信息");
      return;
    }

    that.canvas = document.getElementById('canvas');
    let w = that.video.offsetWidth;
    let h = that.video.offsetHeight;
    that.canvas.width = w;
    that.canvas.height = h;
    let ctx = that.canvas.getContext("2d");
    // 画布图像已经清空，需要重新绘制
    // let img = new Image();
    // img.setAttribute('src',arg.img);
    // ctx.drawImage(img, 0, 0, w, h);

    // 画框
    for (let i = 0; i < that.box.faceRect.length; i++) {
        // 画人脸框
        let rects = that.box.faceRect[i];
        let x = rects.left, y = rects.top, width = rects.right - rects.left + 20, height = rects.bottom - rects.top + 20;
        ctx.strokeStyle = 'rgba(255, 0, 0, 1)';
        ctx.lineWidth = 3;
        ctx.strokeRect(x, y, width, height);

        // 画年龄等信息
        if(pr){
            let age = pr.age.ageArray[i];
            let gender = pr.sex.genderArray[i];
            let live = pr.live.isLive[i];
            let genderInfo = that.explainSex(gender);
            let liveInfo = that.explainLive(live);
            let text = '年龄：' + age + ' 性别：' + genderInfo + ' 活体：'+liveInfo;
            ctx.font = "14px bold 微软雅黑";
            ctx.fillStyle = "#ff0000";
            ctx.fillText(text, x, y - 10)
        }

    }
    // that.previewImg = that.canvas.toDataURL('image/png');
  });

  export default {
    name: 'landing-page',
    components: { SystemInformation,videoPlayer },
    data () {
      return {
        output: undefined,
        scale: 0.8,
        previewImg: undefined,
        canvas: undefined,
        timer: '',
        positivePlayerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], // 播放速度
          autoplay: true, // 如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: 'video/mp4',
            // 视频url地址
            // src: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
            src: require('../assets/video/test.mp4')
          }],
          poster: '', // 你的封面地址
          // width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          }
        }
      }
    },
    mounted(){
      that = this;
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    },
    methods: {

      // 播放时
      async onPlay(player){
        this.getVideoPic();
        this.timer = setTimeout(()=>{this.onPlay()},0)
      },

      // 可播放
      canPlay(player){
        // console.log("canPlay",player)

      },

      // 第一次加载到数据
      loadeddata(player){
        // console.log("loadeddata",player)
      },

      // 截图
      getVideoPic() {
        this.video = document.querySelector('video');
        console.log("this.video",this.video.offsetLeft,this.video.offsetTop)
        let canvas = document.createElement('canvas');
        let w = this.video.offsetWidth; //window.innerWidth;
        let h = this.video.offsetHeight; //window.innerWidth / 16 * 9;
        canvas.width = w;
        canvas.height = h;
        let width = this.video.offsetWidth;
        let height = this.video.offsetHeight;
        canvas.getContext("2d").drawImage(this.video, 0, 0, width, height);
        this.previewImg = canvas.toDataURL('image/png');
        // console.log(this.previewImg);

        ipcRenderer.send("detect", {
          img: this.previewImg,
        });
      },

      explainSex(sex){
        switch (sex) {
          case 0:
            return "男";
          case 1:
            return "女";
          default:
            return "不确定";
        }
      },
      explainLive(live){
        switch (live) {
          case 0:
            return "非真人";
          case -1:
            return "不确定";
          case -2:
            return "传入人脸数>1";
          case -3:
            return "人脸过小";
          case -4:
            return "角度过大";
          case 1:
            return "真人";
          case 5:
            return "人脸超出边界";
        }
      },


    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');


  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body { font-family: 'Source Sans Pro', sans-serif; }

  #wrapper {
    background:
      radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 1) 40%,
        rgba(229, 229, 229, .9) 100%
      );
    height: 100vh;
    padding: 60px 80px;
    width: 100vw;
  }

  #logo {
    height: auto;
    margin-bottom: 20px;
    width: 420px;
  }

  main {
    display: flex;
    justify-content: space-between;
  }

  main > div { flex-basis: 50%; }

  .left-side {
    display: flex;
    flex-direction: column;
  }

  .welcome {
    color: #555;
    font-size: 23px;
    margin-bottom: 10px;
  }

  .title {
    color: #2c3e50;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
  }

  .title.alt {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .doc p {
    color: black;
    margin-bottom: 10px;
  }

  .doc button {
    font-size: .8em;
    cursor: pointer;
    outline: none;
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    color: #fff;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    box-sizing: border-box;
    border: 1px solid #4fc08d;
  }

  .doc button.alt {
    color: #42b983;
    background-color: transparent;
  }
</style>
